<template>
    <div>
        <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="list_data">
                <a-list-item slot="renderItem" key="item.title" slot-scope="item,">
                    <template v-for="{ type, text } in item.actions" slot="actions">
                        <span :key="type">
                            <a-icon :type="type" style="margin-right: 8px" />
                            {{ text }}
                        </span>
                    </template>
                    <a-list-item-meta >
                        <template slot="description">
                            <div class="description">
                                {{ item.description }}
                            </div>
                        </template>
                        <a slot="title" :href="item.href">{{ item.title }}</a>
                    </a-list-item-meta>
                    {{ item.content }}
                </a-list-item>
            </a-list>
    </div>
</template>

<script>
export default {
    data() {
       return {
            "list_data"  : [],
            "pagination"    : {
                onChange: page => {
                    this.buildListData();
                },
                pageSize: 12,
            },
       }; 
    },
    mounted(){
        this.buildListData();
    },
    methods:{
        buildListData(){
            var list_data = [];
            for (let i = 0; i < 23; i++) {
                list_data.push({
                    "href"  : 'http://www.baidu.com',
                    "title" : `这是第 ${i+1} 次说 ”我真的太帅了~“`,
                    "avatar"    : 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
                    "description"   : '简单叙述一下，为什么帅，因为……不想说自己丑',
                    "content"   :'是的，这里是帅的内容…… 扒拉扒拉………… （10小时以后）……  看懂了吧？不懂？ 那我再扒拉扒拉一会儿~  扒拉扒拉扒拉扒拉……',
                    "actions"   : [
                            { type: 'star-o', text: '156' },
                            { type: 'like-o', text: '156' },
                            { type: 'message', text: '2' },
                        ],
                });
            }
            this.list_data = list_data;
        },
    }
}
</script>

<style lang="less" scoped>

</style>